<template>
  <div class="fill-container">
    <!-- 标题和简介 -->
    <div class="edit-item">
      <el-row class="edit-item-row">
        <el-col :span="22">
          <div class="edit-item-title">{{title}}</div>
        </el-col>
      </el-row>
      <div class="introduction">简介：{{introduction}}</div>
    </div>
    <!-- 问题和选项 -->
    <div class="edit-item" v-for="(question, index) in questions" v-bind:key="index">
      <el-row class="edit-item-row">
        <el-col :span="1" class="question-title">{{index + 1}}.</el-col>
        <el-col :span="17" class="question-title">{{question.title}}</el-col>
      </el-row>
      <el-radio-group v-if="question.topic == 1" class="radio-class" v-model="radios[index]">
        <div v-for="(select,index) in question.selects" v-bind:key="index">
          <el-radio :label="index" class="radio-item-class">{{select}}</el-radio>
          <br />
        </div>
      </el-radio-group>
      <div v-if="question.topic == 2" class="radio-class">
        <el-checkbox-group v-model="checkboxs[index]">
          <div v-for="(select,index) in question.selects" v-bind:key="index">
            <el-checkbox :label="index" class="radio-item-class">{{select}}</el-checkbox>
            <br />
          </div>
        </el-checkbox-group>
      </div>
      <div v-if="question.topic==3" class="text-class">
        <el-input v-model="inputs[index]"></el-input>
      </div>
    </div>
    <div class="edit-item" style="margin-bottom:0;">
      <div class="edit-item-time-btns">
        <el-button @click="submit()">提交</el-button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      questionnaire: {
        questionnaireid: '',
        status: ''
      },
      title: '',
      introduction: '',
      questions: [],
      radios: [],
      checkboxs: [],
      inputs: []
    }
  },
  created: async function() {
    var data = {}
    data.questionnaireid = this.$route.query.questionnaireid

    var { data: res } = await this.$http.get('fillin', {
      params: { questionnaireid: this.$route.query.questionnaireid }
    })
    // console.log(res)
    if (res.meta.status !== 200) {
      this.$message.error('打开问卷失败')
      this.$router.push({
        path: '/fillinfail',
        query: { errormsg: '尝试重新打开问卷' }
      })
    }
    if (res.data.status === '未发布') {
      this.$message.error('打开问卷失败')
      this.$router.push({
        path: '/fillinfail',
        query: { errormsg: '问卷处于未发布状态，⽆法查看问卷' }
      })
    }
    if (res.data.status === '已结束') {
      this.$message.error('打开问卷失败')
      this.$router.push({
        path: '/fillinfail',
        query: { errormsg: '问卷处于已结束状态，⽆法填写以及提交' }
      })
    }
    this.questions = res.data.questions
    this.title = res.data.title
    this.introduction = res.data.introduction
    for (let i = 0; i < this.questions.length; ++i) {
      this.radios.push('')
      this.checkboxs.push([])
      this.inputs.push('')
    }
  },
  methods: {
    test: function() {
      console.log(this.radios)
      console.log(this.checkboxs)
      console.log(this.inputs)
    },
    submit: async function() {
      var data = {}
      data.questionnaireid = this.$route.query.questionnaireid
      var answers = []
      for (let i = 0; i < this.questions.length; ++i) {
        if (this.questions[i].topic === 1) {
          answers.push(this.radios[i] + '')
          if (answers[i] === '') {
            this.$message.error('请回答完所有问题')
            return
          }
        } else if (this.questions[i].topic === 2) {
          var str = ''
          for (let j = 0; j < this.checkboxs[i].length; ++j) {
            str += this.checkboxs[i][j]
            if (j !== this.checkboxs[i].length - 1) {
              str += ','
            }
          }
          answers.push(str)
          if (answers[i] === '') {
            this.$message.error('请回答完所有问题')
            return
          }
        } else if (this.questions[i].topic === 3) {
          answers.push(this.inputs[i])
          if (answers[i] === '') {
            this.$message.error('请回答完所有问题')
            return
          }
        }
      }
      data.answers = answers
      var { data: res } = await this.$http.post('submit', data)
      // console.log(res)
      if (res.meta.status !== 200) {
        this.$message.error('提交失败,请重试')
      }
      this.$message.success('提交问卷成功')
      this.$router.push('/submitsuccess')
    }
  }
}
</script>

<style lang="less" scoped>
.fill-container {
  background-color: #e9eef3;
}
.el-main {
  background-color: #e9eef3;
}
.edit-item {
  background-color: white;
  margin: 0 auto;
  margin-bottom: 30px;
  max-width: 700px;
}
.title-item {
  padding: 10px;
  text-align: center;
}
.input-click-item {
  height: 100px;
}
.edit-item-title {
  text-align: center;
  font-size: 28px;
}
.edit-item-row {
  padding: 20px;
  padding-bottom: 0;
}
.introduction {
  padding: 30px;
}
.input-item {
  padding: 10px;
}
.radio-class {
  padding: 20px;
  padding-top: 10px;
}
.radio-item-class {
  padding: 9px;
}
.question-title {
  padding: 5px;
}
.text-class {
  padding-left: 40px;
  padding-right: 40px;
  padding-top: 15px;
  padding-bottom: 20px;
}
.edit-item-time-title {
  text-align: center;
  padding-top: 15px;
  padding-bottom: 5px;
}
.edit-item-time-box {
  text-align: center;
  padding-top: 15px;
  padding-bottom: 5px;
}
.edit-item-time-btns {
  text-align: center;
  padding-top: 15px;
  padding-bottom: 15px;
}
.add-question-button {
  position: fixed;
  bottom: 30px;
  right: 50px;
}
.topic-select {
  margin-top: -20px;
  margin-left: 80px;
  padding-bottom: 20px;
}
.transition-box {
  text-align: center;
  color: #fff;
  padding: 10px 0px;
  box-sizing: border-box;
}
</style>
